<template>
 <div>
   <div class="typeList clearfix">
     <div class="typeBlock mrPercent5 tc">
       <dl class="clearfix tl">
         <dt><img src="../../assets/images/01.png" height="100" width="100"/></dt>
         <dd class="firstChild">项目申报类</dd>
         <dd><span class="fb">{{TypeCountData[0]}}</span>条</dd>
         <dd>>>匹配<span class="fb">{{matchcountData[0]}}</span>家企业</dd>
       </dl>
     </div>
     <div class="typeBlock mrPercent5 tc">
       <dl class="clearfix tl">
         <dt><img src="../../assets/images/02.png" height="100" width="100"/></dt>
         <dd class="firstChild">资质认定类</dd>
         <dd><span class="fb">{{TypeCountData[1]}}</span>条</dd>
         <dd>>>匹配<span class="fb">{{matchcountData[1]}}</span>家企业</dd>
       </dl>
     </div>
     <div class="typeBlock tc">
       <dl class="clearfix tl">
         <dt><img src="../../assets/images/03.png" height="100" width="100"/></dt>
         <dd class="firstChild">财税奖补类</dd>
         <dd><span class="fb">{{TypeCountData[2]}}</span>条</dd>
         <dd>>>匹配<span class="fb">{{matchcountData[2]}}</span>家企业</dd>
       </dl>
     </div>
   </div>
    <!--为echarts准备一个具备大小的容器dom-->
    <div class="chartContent clearfix mt30">
        <policy-data></policy-data>
        <register-data></register-data>
    </div>

 </div>

</template>
<script>
  import { postAjax, getAjax} from "../../api/api.js";
import PolicyData from "./components/policySize";
import registerData from "./components/registerNum";

export default {
  components: {
      PolicyData,
      registerData
  },
  name: "",
  data() {
    return {
      TypeCountData:[],
      matchcountData:[]
    };
  },
  methods: {
      //获取类型数量
      getTypeCount(){
        this.$Loading.start();
          getAjax('/policyInfo/getTypeCount')
          .then((response) => {
            if(response.data.code === 0){
              this.$Loading.finish();
              this.TypeCountData = [];
              let _this = this
              response.data.obj.forEach(element => {
                _this.TypeCountData.push(element.value)
                _this.matchcountData.push(element.matchcount)
              });
            }else {
              this.$Loading.error();
              this.$Message.warning("数据请求异常")
            }
          })
      },
  },
  //调用
  mounted() {
    this.getTypeCount();
  }
};
</script>
<style scoped>
.typeList .typeBlock {
  background-color: #fff;
  width: 32%;
  min-width: 310px;
  height: 160px;
  float: left;
  padding: 25px 30px;
  border: 1px solid #ececec;
}
.mrPercent5 {
  margin-right: 2%;
}
.typeList dl{
  width: 280px;
  display: inline-block;
}
.typeList dl dt,
.typeList dl dd {
  float: left;
}
.typeList dl dd {
  margin-left: 20px;
  width: 50%;
}
.typeList dl .firstChild {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 500;
  display: inline-block;
}
.typeList dl dd:nth-child(3) span{
  font-size: 24px;
  color: #2299ee;
}
.typeList dl dd:nth-child(3){
  font-size: 14px;
}
.typeList dl dd:nth-child(4){
  font-size: 16px;

}
.typeList dl dd:nth-child(4) span{
  color: #ff9600;
}
.typeList dl:nth-child(2) dd:nth-child(3) span{
  color: #96c932;
}
.typeList dl:nth-child(3) dd:nth-child(3) span{
  color: #f3c81e;
}
.chartContent .leftChart{
  background-color: #fff;
  width: 49%;
  margin-right: 2%;
}
.chartContent .rightChart{
  background-color: #fff;
  width: 49%;
}
.chartContent .leftChart h4{
  color: #333;
  font-size: 16px;
}
</style>
